<template>
    <div>
        <div class="box">
            <el-form>
                <el-row :gutter="20">

                    <el-col :span="6">
                        <el-form-item label="姓名">
                            <el-input size="large" :placeholder="'姓名'" v-model="requestParam.data.name"
                                autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="账号">
                            <el-input size="large" :placeholder="'账号'" v-model="requestParam.data.username"
                                autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col
                    v-if="isShowSelectGoodsStore"
                    :span="6">
                        <el-form-item label="门店">
                            <el-button
                            @click="goodsStoreSelect.open()"
                            >{{ goodsStore.name }}</el-button>
                        </el-form-item>
                    </el-col>


                    <!-- 查询 -->
                    <el-col :span="6">
                        <el-form-item>
                            <el-button size="large" type="primary" @click.prevent="getBodyData()">查询</el-button>
                        </el-form-item>
                    </el-col>


                </el-row>

            </el-form>

        </div>

        <div class="box">

            <el-card>
                <template #header>
                    <div class="card-header">
                        <span>员工</span>
                        <el-button style="float: right;" size="mini" type="primary"
                            @click.prevent="toSave('')">新增</el-button>
                        <el-button style="float: right;margin-right: 10px;" size="mini" type="danger"
                            @click.prevent="toRemoveBatch()">删除</el-button>
                    </div>
                </template>

                <el-table ref="table" @selection-change="selectionChange" :reserve-selection="true" v-loading="loading"
                    element-loading-text="Loading..." :data="bodyData.content" style="width: 100%" row-key="id"
                    max-height="500px">

                    <el-table-column type="selection" width="55" />

                    <el-table-column prop="goodsStore.name" label="门店名称" width="120">
                    </el-table-column>

                    <el-table-column prop="name" label="姓名" width="120" />

                    <el-table-column prop="username" label="用户名" width="120" />

                    <el-table-column prop="phone" label="手机号" width="120" />

                    <el-table-column prop="email" label="邮箱" width="120" />

                    <el-table-column prop="address" label="地址" width="120" />
                    
                    <el-table-column prop="idCard" label="身份证" width="120">
                    </el-table-column>


                    <el-table-column prop="gmtCreate" label="创建时间" width="120">
                        <template #default="{ row }">
                            {{ new Date(row.gmtCreate).toLocaleDateString() }}
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="" width="120">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click.prevent="toEdit(scope.row)">
                                <el-icon>
                                    修改
                                </el-icon>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="position:relative;
                height: 30px;
                ">
                    <el-pagination @current-change="pageChange" style="
                    position:absolute;
                    left:50%;
                    top:10px;
                    transform:translateX(-50%);
                    " layout="prev, pager, next" :page-size="requestParam.pageSize"
                        :current-page="requestParam.pageNumber" :total="bodyData.totalElements" />
                </div>
            </el-card>
        </div>

        <DialogOfSave ref="dialogOfSave" @submit="getBodyData();" 
        :isShowSelectGoodsStore="isShowSelectGoodsStore"
        />
        <GoodsStoreSelect ref="goodsStoreSelect" 
        @select="selectGoodsStore"
        />

    </div>
</template>

<script lang="ts" setup>
import { ref,defineExpose } from 'vue';
import $kt from '@/vueKantboot';
import DialogOfSave from './components/DialogOfSave.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import GoodsStoreSelect from '@/components/goodsStoreSelect/goodsStoreSelect.vue';

let goodsStoreSelect = ref();

let dialogOfSave = ref();

let table = ref();

let toSave = (param: any) => {
    dialogOfSave.value.open(param);
}


let requestParam = ref({
    data: {
        "name": null,
        "username": null,
        "phone": null,
        "email": null,
        "address": "",
        "idCard": null,
        "goodsStoreId": null,
    },
    pageNumber: 1,
    pageSize: 30,
});

let isTop = ref(true);

let bodyData = ref({
    content: [
        {
            "address": "111",
            "birthday": 1698717109000,
            "email": "333@qq.com",
            "genderCode": null,
            "gmtCreate": null,
            "gmtModified": null,
            "goodsStoreId": null,
            "id": 1,
            "name": "111",
            "phone": "111",
            "userId": null,
            "username": "111",
            "idCard": "111",
            "goodsStore":{
                "id": 1,
                "name": "111",
            }
        }
    ],
    totalElements: 0,
});

let selection = ref([]);

let selectionChange = (val: any) => {
    selection.value = val;
}


let toEdit = (param: any) => {
    dialogOfSave.value.open(param);
}


let pageChange = (val: any) => {
    requestParam.value.pageNumber = val;
    getBodyData();
}


let loading = ref(true);

let getBodyData = () => {
    $kt.request.request({
        url: '/business-goods-web/admin/emp/getBodyData',
        method: 'post',
        data: requestParam.value,
    }).then((res) => {
        if (res.data.success) {
            bodyData.value = res.data.data;
        }
        loading.value = false;
    });
}

getBodyData();




let removeBatch = () => {



    $kt.request.request({
        url: '/business-goods-web/admin/emp/removeBatch',
        method: 'post',
        data: selection.value,
    }).then((res) => {
        if (res.data.success) {
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
            getBodyData();
            return false;
        }
        ElMessage({
            message: res.data.errMsg,
            type: 'error',
        });
    });

}


let toRemoveBatch = () => {
    if (selection.value.length == 0) {
        ElMessage({
            message: '请选择要删除的数据',
            type: 'error',
        });
        return false;
    }

    // 询问是否删除
    ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 删除
        removeBatch();
    }).catch(() => {
        // 取消
        ElMessage({
            type: 'info',
            message: '已取消删除'
        });
    });
}


let goodsStore= ref({
    id: null,
    name: "所有门店",
});

let selectGoodsStore = (res: any) => {
    requestParam.value.data.goodsStoreId = res.id;
    goodsStore.value = res;
    getBodyData();
}

let isShowSelectGoodsStore = ref(true);

let toSelectGoodsStore = (res: any) => {
    requestParam.value.data.goodsStoreId = res.id;
    goodsStore.value = res;
    getBodyData();
    requestParam.value.data.goodsStoreId = res.id;
    if (res.id == null||res.id=='') {
        isShowSelectGoodsStore.value = true;
    } else {
        isShowSelectGoodsStore.value = false;
    }
}

let flush = () => {
    goodsStoreSelect.value.flush();
}

defineExpose({
    selectGoodsStore,
    toSelectGoodsStore,
    flush
})


</script>

<style lang="scss" scoped>
.box {
    padding: 20px 20px 0 20px;
}

.box-box {
    background-color: #fff;
    color: #fff;
    text-align: center;
    padding: 30px;
    border-radius: 5px;
}


.box-box:hover {
    // 变小
    transform: scale(0.95);
}

.box-box:active {
    // 变小
    transform: scale(0.9);
}
</style>